// 图标的默认配置，自定义配置优先级高于此默认配置。
import { Shape } from '@antv/x6'

// 节点宽高跟画布size成倍数关系才方便对齐
export const GRID_SIZE = 16

// 最大和最小缩放
export const SCALE_MAX = 5
export const SCALE_MIN = 0.2

// 右键菜单的class标识
export const CONTEXT_MENU_CLASS_NAME = 'x6-context-menu'

// 节点嵌套时，做自适应的通用配置。主要是内外边距的配置
export const NODE_FIT_OPTION = { padding: { top: 16, bottom: 24, left: 16, right: 16 } }

export const GRAPH = {
  grid: {
    visible: true,
    type: 'dot',
    size: GRID_SIZE
  },
  background: {
    color: '#fff'
  },
  mousewheel: {
    enabled: true,
    modifiers: 'Ctrl',
    maxScale: SCALE_MAX,
    minScale: SCALE_MIN
  },
  autoResize: true,
  highlighting: {
    magnetAdsorbed: {
      name: 'stroke',
      args: {
        attrs: {
          fill: '#fff',
          stroke: '#31d0c6',
          strokeWidth: 4
        }
      }
    }
  }
}

// 边的样式及配置
export const EDGE = {
  attrs: {
    line: {
      connection: true,
      stroke: '#0000004D',
      strokeWidth: 1,
      targetMarker: {
        name: 'classic',
        size: 6
      }
    }
  }
  // 连线需要置顶于容器组件
  // zIndex: 0,
}

// manhattan连线配置
export const MANHATTAN_CONNECT = {
  allowNode: false,
  allowBlank: false,
  allowEdge: false,
  router: 'manhattan',
  connector: {
    name: 'rounded',
    args: {
      radius: 10
    }
  },
  connectionPoint: {
    name: 'boundary',
    args: {
      offset: 0
    }
  },
  // anchor: 'center',
  anchor: 'orth',
  snap: {
    radius: 30
  },
  createEdge() {
    return new Shape.Edge({
      ...EDGE
    })
  }
}

// 基础节点的配置（非容器）
export const ATOM_NODE = {
  // shape: ICON_NODE_NAME,
  width: GRID_SIZE * 3,
  height: GRID_SIZE * 3
}

// 自定义节点外壳（主要用于画布中自定义节点的实现）
export const ICON_ATOM_NODE = {
  shape: 'iconAtomNode',
  width: GRID_SIZE * 3,
  height: GRID_SIZE * 3,
  effect: ['data'],
  html(cell: any) {
    const { label, type } = cell.getData()
    const div = document.createElement('div')
    div.id = cell.id
    div.className = `icon-atom-node`

    const iconBodyElement = document.createElement('div')
    iconBodyElement.className = `icon-body icon-${type}`
    const labelElement = document.createElement('label')
    labelElement.innerHTML = label

    div.appendChild(iconBodyElement)
    div.appendChild(labelElement)

    return div
  }
}

// 容器节点的配置
export const CONTAINER_NODE = {
  width: ATOM_NODE.width,
  height: ATOM_NODE.height,
  markup: [
    {
      tagName: 'rect', // 标签名称
      selector: 'body' // 选择器
    },
    {
      tagName: 'text',
      selector: 'label'
    }
  ],
  attrs: {
    body: {
      stroke: '#8f8f8f',
      strokeWidth: 1,
      fill: '#ffffff90'
    },
    label: {
      refX: 0.5,
      refY: '100%',
      refY2: 4,
      textAnchor: 'middle',
      textVerticalAnchor: 'top',
      fontSize: '12px',
      fill: '#00000080'
    }
  }
}

// 连结桩属性
const PORT_ATTRS = {
  circle: {
    magnet: true,
    stroke: '#8f8f8f',
    strokeWidth: 1,
    fill: '#fff',
    r: 4,
    opacity: 0.05
  }
}

// 默认的连结桩配置
export const NODE_PORTS = {
  groups: {
    left: {
      position: 'left',
      attrs: PORT_ATTRS
    },
    top: {
      position: 'top',
      attrs: PORT_ATTRS
    },
    right: {
      position: 'right',
      attrs: PORT_ATTRS
    },
    bottom: {
      position: 'bottom',
      attrs: PORT_ATTRS
    }
  },
  items: [
    {
      group: 'top'
    },
    {
      group: 'right'
    },
    {
      group: 'bottom'
    },
    {
      group: 'left'
    }
  ]
}
